import React, { Component } from 'react';
import axios from 'axios';
import { List } from 'antd';
import { Link } from 'react-router-dom';

class PageList extends Component {

    // props发生改变的时候执行
    componentWillReceiveProps(nextProps) {
        // console.log('test');
        // console.log(nextProps.match.params.id);
        const id = nextProps.match.params.id;
        axios.get('http://www.dell-lee.com/react/api/list.json?id=' + id)
            .then(res => {
                // console.log(res.data.data);
                this.setState({
                    data: res.data.data
                })
            })
    }

    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    render() {
        // console.log(this.props.match.params);
        return (
            <List
                style={{background:'#fff', height: '100%'}}
                bordered
                dataSource={this.state.data}
                renderItem={item => (
                    <List.Item>
                        <Link to={`/detail/${item.id}`}>
                            {item.title}
                        </Link>
                    </List.Item>
                )}
            ></List>
        )
    }

    componentDidMount() {
        // 接收参数
        let url = 'http://www.dell-lee.com/react/api/list.json';
        const id = this.props.match.params;
        if (id) {
            url = url + '?id=' + id;
        }
        axios.get(url)
            .then(res => {
                // console.log(res.data.data);
                this.setState({
                    data: res.data.data
                })
            })
    }

    // componentDidUpdate(nextProps) {
    //     // console.log('test');
    //     // console.log(nextProps.match.params.id);
    //     const id = nextProps.match.params.id;
    //     axios.get('http://www.dell-lee.com/react/api/list.json?id=' + id)
    //         .then(res => {
    //             // console.log(res.data.data);
    //             this.setState({
    //                 data: res.data.data
    //             })
    //         })
    // }

}

export default PageList;